{extend name="layout" /}
{block name="body"}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div id="toolbar" class="toolbar-btn-action">
                    <button type="button" data-toggle="modal" data-target="#exampleModal"
                        class="btn btn-label btn-primary m-r-5">
                        <label><i class="mdi mdi-plus" aria-hidden="true"></i></label>新增
                    </button>
                    <button id="btn_edit" type="button" class="btn btn-label btn-success m-r-5">
                        <label><i class="mdi mdi-check" aria-hidden="true"></i></label>启用
                    </button>
                    <button id="btn_down" type="button" class="btn btn-label btn-warning m-r-5">
                        <label><i class="mdi mdi-block-helper" aria-hidden="true"></i></label>禁用
                    </button>
                    <button id="btn_delete" type="button" class="btn btn-label btn-danger">
                        <label><i class="mdi mdi-window-close" aria-hidden="true"></i></label>删除
                    </button>
                </div>
                <div class="input-group mb-3">
                    <div class="form-group mb-2 mr-2">
                        <input class="form-control" type="text" name="searchusername" id="searchusername" placeholder="请输入用户名..">
                    </div>
                    <div class="input-group-append">
                        <a class="btn btn-default mb-2 mr-2" id="search_btn" href="#!"><i class="mdi mdi-magnify"></i> 搜索</a>
                    </div>
                </div>

                <table id="tb_departments"></table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLabel">新增用户</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="password">用户密码</label>
                        <input type="text" class="form-control" id="password" placeholder="请输入用户密码">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="shutdown" data-dismiss="modal">关闭</button>
                    <button type="button" id="add" class="btn btn-w-sm btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    $('#tb_departments').bootstrapTable({
        classes: 'table table-bordered table-hover table-striped',
        url: "{:url('user/getAllUsers')}",
        method: 'get',
        dataType: 'json',
        uniqueId: 'id',
        idField: 'id',             // 每行的唯一标识字段
        toolbar: '#toolbar',       // 工具按钮容器
        showColumns: true,         // 是否显示所有的列
        showRefresh: true,         // 是否显示刷新按钮
        pagination: true,                    // 是否显示分页
        sortOrder: "asc",                    // 排序方式
        queryParams: function (params) {
            var temp = {
                limit: params.limit,         // 每页数据量
                offset: params.offset,       // sql语句起始索引
                page: (params.offset / params.limit) + 1,
                sort: params.sort,           // 排序的列名
                sortOrder: params.order,      // 排序方式'asc' 'desc'
                username: $.trim($('#searchusername').val())
            };
            return temp;
        },                                   // 传递参数
        sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
        pageNumber: 1,                       // 初始化加载第一页，默认第一页
        pageSize: 10,                        // 每页的记录行数
        pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
        // search: true,                      // 是否显示表格搜索，此搜索是客户端搜索

        showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
        exportDataType: "all", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

        columns: [{
            field: 'example',
            checkbox: true    // 是否显示复选框
        }, {
            field: 'id',
            title: 'id',
            sortable: true    // 是否排序
        }, {
            field: 'username',
            title: '用户名',
        }, {
            field: 'usertx',
            title: '用户头像',
            formatter: function (value, row, index) {
                value = "<img src='" + row.usertx + "' style='width:50px;height:50px;border-radius: 15px;'/>";
                return value;
            }
        }, {
            field: 'nickname',
            title: '昵称'
        }, {
            field: 'create_time',
            title: '创建时间',
            sortable: true,
        }, {
            field: 'ip',
            title: '登录ip',
        }, {
            field: 'viptime',
            title: '是否是会员',
            formatter: function (value, row, index) {
                var value = "";
                if (row.viptime < gettime()) {
                    value = '<span class="badge badge-danger">否</span>';
                } else {
                    value = '<span class="badge badge-success">是</span>';
                }
                return value;
            }
        }, {
            field: 'sex',
            title: '性别',
            formatter: function (value, row, index) {
                var value = "";
				if (row.sex == '0') {
				    value = '<span class="badge badge-info">男</span>';
				} else {
				    value = '<span class="badge badge-info">女</span>';
				}                
                return value;
            }
        }, {
            field: 'reasons',
            title: '状态',
            formatter: function (value, row, index) {
                var value = "";
                if (row.reasons == 1) {
                    value = '<span class="badge badge-danger">封禁中</span>';
                } else {
                    value = '<span class="badge badge-success">正常</span>';
                }
                return value;
            }
        }, {
            field: 'operate',
            title: '操作',
            formatter: btnGroup,  // 自定义方法
            events: {
                'click .edit-btn': function (event, value, row, index) {
                    window.location.href = "{:url('/admin/user/edit/id/" + row.id + "')}";
                },
                'click .del-btn': function (event, value, row, index) {
                    deleteuser(row.id, row.username);
                }
            }
        }],
        onLoadSuccess: function (data) {
            $("[data-toggle='tooltip']").tooltip();
        }
    });

    // 操作按钮
    function btnGroup() {
        let html =
            '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
            '<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
        return html;
    }

    function getnumber() {
        var selRows = $('#tb_departments').bootstrapTable("getSelections");
        if (selRows.length == 0) {
            notify.error("请至少选择一行");
            return false;
        }
        var postData = "";
        $.each(selRows, function (i) {
            postData += this.id;
            if (i < selRows.length - 1) {
                postData += ",";
            }
        });
        return postData;
    }

    $("#add").click(function () {
        var l = $('#add').lyearloading({
            opacity: 0.2,
            spinnerSize: 'nm'
        });
        var username = $.trim($("#username").val());
        var password = $.trim($("#password").val());
        $.ajax({
            type: 'post',
            url: "{:url('user/add')}",
            data: {
                'username': username,
                'password': password,
            },
            dataType: "json",
            success: function (data) {
                l.destroy();
                if (data.code == 1) {
                    notify.success(data.msg);
                    $("#exampleModal").modal('hide');
                    $('#tb_departments').bootstrapTable('refresh');
                } else {
                    notify.error(data.msg);
                    $("#exampleModal").modal('hide');
                }
            },
            error: function () {
                l.destroy();
                notify.error("系统错误");
            }
        })
    });

    $("#btn_edit").click(function () {
        var l = $('body').lyearloading({
            opacity: 0.2,
            spinnerSize: 'lg',
            spinnerText: '后台处理中，请稍后...',
            textColorClass: 'text-info',
            spinnerColorClass: 'text-info'
        });
        var getnum = getnumber();
        // console.log(getnum);
        if (getnum == false) {
            l.destroy();
            return false;
        }
        //ajax修改状态
        $.ajax({
            type: "POST",
            url: "{:url('user/editstatus')}",
            data: {
                "id": getnum,
                "userstate": 0,
            },
            dataType: "json",
            success: function (data) {
                l.destroy();
                if (data.code == 1) {
                    notify.success("修改成功");
                    $('#tb_departments').bootstrapTable('refresh');
                }
            },
            error: function () {
                l.destroy();
                notify.error("服务器错误");
            }
        });
    });

    $("#btn_down").click(function () {
        var l = $('body').lyearloading({
            opacity: 0.2,
            spinnerSize: 'lg',
            spinnerText: '后台处理中，请稍后...',
            textColorClass: 'text-info',
            spinnerColorClass: 'text-info'
        });
        var getnum = getnumber();
        // console.log(getnum);
        if (getnum == false) {
            l.destroy();
            return false;
        }
        //ajax修改状态
        $.ajax({
            type: "POST",
            url: "{:url('user/editstatus')}",
            data: {
                "id": getnum,
                "userstate": 1,
            },
            dataType: "json",
            success: function (data) {
                l.destroy();
                if (data.code == 1) {
                    notify.success("修改成功");
                    $('#tb_departments').bootstrapTable('refresh');
                }
            },
            error: function () {
                l.destroy();
                notify.error("服务器错误");
            }
        });
    });

    $("#search_btn").click(function () {
        $('#tb_departments').bootstrapTable('refresh');
    })

    function deleteuser(id, username) {
        $.confirm({
            title: '确认删除',
            content: "确定删除" + username + "用户?",
            autoClose: 'cancelAction|10000',
            escapeKey: 'cancelAction',
            buttons: {
                confirm: {
                    btnClass: 'btn-red',
                    text: '删除' + username + '用户',
                    action: function () {
                        var l = $('body').lyearloading({
                            opacity: 0.2,
                            spinnerSize: 'lg',
                            spinnerText: '后台处理中，请稍后...',
                            textColorClass: 'text-info',
                            spinnerColorClass: 'text-info'
                        });
                        $.ajax({
                            type: "POST",
                            url: "{:url('user/delete')}",
                            data: {
                                id: id,
                            },
                            dataType: "json",
                            success: function (data) {
                                l.destroy();
                                notify.success(data.msg);
                                $('#tb_departments').bootstrapTable('refresh');
                            },
                            error: function () {
                                l.destroy();
                                notify.error("系统错误");
                            }
                        })

                    }
                },
                cancelAction: {
                    text: '取消',
                    action: function () {
                    }
                }
            }
        });
    }

    $("#btn_delete").click(function () {
        var l = $('body').lyearloading({
            opacity: 0.2,
            spinnerSize: 'lg',
            spinnerText: '后台处理中，请稍后...',
            textColorClass: 'text-info',
            spinnerColorClass: 'text-info'
        });
        var getnum = getnumber();
        //console.log(getnum);
        if (getnum == false) {
            l.destroy();
            return false;
        }
        $.ajax({
            type: "POST",
            url: "{:url('user/delete')}",
            data: {
                id: getnum
            },
            dataType: "json",
            success: function (data) {
                l.destroy();
                notify.success(data.msg);
                $('#tb_departments').bootstrapTable('refresh');
            },
            error: function () {
                l.destroy();
                notify.error("系统错误");
            }
        });
    })
    function gettime(){
        var tmp = Date.parse( new Date() ).toString();
        tmp = tmp.substr(0,10);
        return tmp;
    }
</script>
{/block}